/**
 * Created by 傅彰炜 on 2017/11/23.
 */
$(document).ready(function() {
    /*判断主页中点击的选项，默认选中*/
    var setNum = window.location.href,
        value = setNum.substr(setNum.length-1,1),
        nowLi = $(".setting_menu").find("ul").find("li"),
        setting_title = $(".setting_title").find("p"),
        show = $(".box_detail").find(".form");
    nowLi.eq(value).addClass("nowLi").siblings().removeClass("nowLi");
    setting_title.text(nowLi.eq(value).text());
    show.eq(value).addClass("active").siblings().removeClass("active");

    nowLi.click(function () {
        var index = $(this).index();
        $(this).addClass("nowLi").siblings().removeClass("nowLi");
        setting_title.text(nowLi.eq(index).text());
        show.eq(index).addClass("active").siblings().removeClass("active");
    })

    /*返回主页*/
    $(".back_settingInfo").click( function () {
        window.history.back(-1);
        $(location).attr("href","${pageContext.request.contextPath}/../main/main.html");
    })

    /*input失去焦点时，如何值发生变化，则可保存*/
    $("input").bind('input propertychange', function() {
        $(".saveInfo").css("color","#008CBA");
        $(".saveInfo").css("border-color","#008CBA");
        $(".saveInfo").removeAttr("disabled");
        $(".saveInfo").click(function () {
            alert("数据已保存！");
        })
    });

    $(".form").find("input").blur(function(){
        var index = $(this).parent().index();    /*点击的文本框*/
        var value = $(this).val();     /*点击的文本框的值*/
        var length = value.replace(/[^/x00-\xff]/g,"**").length;    /*文本框输入的长度*/
        var right = "<img src='../images/folders/selected.png' />";     /*输入正确时*/
        var wrong = "<img src='../images/folders/wrong.png' />"+"<p>输入错误！请重新输入！</p>";       /*输入错误时*/
        var firstPwd = $(".pwd").val();
        var secondPwd = $(".rpwd").val();
        if(index == 0){
            if(length != 0) {
                if(length > 3 && length < 9) {
                    $(this).parent().find(".secondLabel").html(right);
                } else
                    $(this).parent().find(".secondLabel").html(wrong);
            }
        }
        if(index == 1){
            if(length != 0) {
                if (length > 8 && length < 16){
                    $(this).parent().find(".secondLabel").html(right);
                } else
                    $(this).parent().find(".secondLabel").html(wrong);
            }
        }
        if(index == 2){
            if(length != 0) {
                if (firstPwd == secondPwd) {
                    $(this).parent().find(".secondLabel").html(right);
                } else
                    $(this).parent().find(".secondLabel").html(wrong);
            }
        }
    });

    "use strict";
    $(function () {
        var cropbox = function(options, el){
            var el = el || $(options.imageBox),
                obj =
                    {
                        state : {},
                        ratio : 1,
                        options : options,
                        imageBox : el,
                        thumbBox : el.find(options.thumbBox),
                        spinner : el.find(options.spinner),
                        image : new Image(),
                        getDataURL: function ()
                        {
                            var width = this.thumbBox.width(),
                                height = this.thumbBox.height(),
                                canvas = document.createElement("canvas"),
                                dim = el.css('background-position').split(' '),
                                size = el.css('background-size').split(' '),
                                dx = parseInt(dim[0]) - el.width()/2 + width/2,
                                dy = parseInt(dim[1]) - el.height()/2 + height/2,
                                dw = parseInt(size[0]),
                                dh = parseInt(size[1]),
                                sh = parseInt(this.image.height),
                                sw = parseInt(this.image.width);

                            canvas.width = width;
                            canvas.height = height;
                            var context = canvas.getContext("2d");
                            context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
                            var imageData = canvas.toDataURL('image/png');
                            return imageData;
                        },
                        getBlob: function()
                        {
                            var imageData = this.getDataURL();
                            var b64 = imageData.replace('data:image/png;base64,','');
                            var binary = atob(b64);
                            var array = [];
                            for (var i = 0; i < binary.length; i++) {
                                array.push(binary.charCodeAt(i));
                            }
                            return  new Blob([new Uint8Array(array)], {type: 'image/png'});
                        },
                        zoomIn: function ()
                        {
                            this.ratio*=1.1;
                            setBackground();
                        },
                        zoomOut: function ()
                        {
                            this.ratio*=0.9;
                            setBackground();
                        }
                    },
                setBackground = function()
                {
                    var w =  parseInt(obj.image.width)*obj.ratio;
                    var h =  parseInt(obj.image.height)*obj.ratio;

                    var pw = (el.width() - w) / 2;
                    var ph = (el.height() - h) / 2;

                    el.css({
                        'background-image': 'url(' + obj.image.src + ')',
                        'background-size': w +'px ' + h + 'px',
                        'background-position': pw + 'px ' + ph + 'px',
                        'background-repeat': 'no-repeat'});
                },
                imgMouseDown = function(e)
                {
                    e.stopImmediatePropagation();

                    obj.state.dragable = true;
                    obj.state.mouseX = e.clientX;
                    obj.state.mouseY = e.clientY;
                },
                imgMouseMove = function(e)
                {
                    e.stopImmediatePropagation();

                    if (obj.state.dragable)
                    {
                        var x = e.clientX - obj.state.mouseX;
                        var y = e.clientY - obj.state.mouseY;

                        var bg = el.css('background-position').split(' ');

                        var bgX = x + parseInt(bg[0]);
                        var bgY = y + parseInt(bg[1]);

                        el.css('background-position', bgX +'px ' + bgY + 'px');

                        obj.state.mouseX = e.clientX;
                        obj.state.mouseY = e.clientY;
                    }
                },
                imgMouseUp = function(e)
                {
                    e.stopImmediatePropagation();
                    obj.state.dragable = false;
                },
                zoomImage = function(e)
                {
                    e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
                    setBackground();
                }

            obj.spinner.show();
            obj.image.onload = function() {
                obj.spinner.hide();
                setBackground();

                el.bind('mousedown', imgMouseDown);
                el.bind('mousemove', imgMouseMove);
                $(window).bind('mouseup', imgMouseUp);
                el.bind('mousewheel DOMMouseScroll', zoomImage);
            };
            obj.image.src = options.imgSrc;
            el.on('remove', function(){$(window).unbind('mouseup', imgMouseUp)});

            return obj;
        };

        jQuery.fn.cropbox = function(options){
            return new cropbox(options, this);
        };
    });


});